/*
 * @Description:
 * @Version: 2.0
 * @Author: Xing
 * @Date: 2020-12-08 15:07:42
 * @LastEditors: Xing
 * @LastEditTime: 2020-12-08 16:54:57
 */
import React, { Component, useState } from 'react';
import PropTypes from 'prop-types';

import { Layout, Menu, Breadcrumb } from 'antd';

import { DesktopOutlined, PieChartOutlined, FileOutlined, TeamOutlined, UserOutlined } from '@ant-design/icons';

import { Route } from 'react-router-dom';
import Home from '../home/home';
import Log from '../log/log';
import AddArticle from '../article/AddArticle/AddArticle';
import ArticleList from '../article/ArticleList/ArticleList';

import './index.css';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

const roleList = [
  {
    key: 'home',
    title: '首页',
    icon: <DesktopOutlined />,
  },
  {
    key: 'article',
    title: '文章管理',
    icon: <DesktopOutlined />,
    children: [
      {
        key: 'articleList',
        title: '文章列表',
      },
      {
        key: 'addArticle',
        title: '添加文章',
      },
    ],
  },
  {
    key: 'log',
    title: '操作日志',
    icon: <PieChartOutlined />,
  },
];

class Index extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = (collapsed) => {
    // console.log(collapsed);
    this.setState({ collapsed });
  };

  handleClickArticle = (e) => {
    // console.log('e', e.key);
    if (e.key == 'addArticle') {
      this.props.history.push('/index/addArticle');
    } else if (e.key == 'articleList') {
      this.props.history.push('/index/articleList');
    } else if (e.key == 'home') {
      this.props.history.push('/index/home');
    } else if (e.key == 'log') {
      this.props.history.push('/index/log');
    } else {
      this.props.history.push('/login');
    }
  };

  render() {
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            {roleList.map((item) => {
              if (!item.children) {
                return (
                  <Menu.Item key={item.key} onClick={this.handleClickArticle} icon={item.icon} title={<span>{item.title}</span>}>
                    {item.title}
                  </Menu.Item>
                );
              } else {
                return (
                  <SubMenu key={item.key} onClick={this.handleClickArticle} icon={item.icon} title={<span>{item.title}</span>}>
                    {item.children &&
                      item.children.map((row) => {
                        return <Menu.Item key={row.key}>{row.title}</Menu.Item>;
                      })}
                  </SubMenu>
                );
              }
            })}
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              <div>
                <Route path="/index/home" exact component={Home} />
                <Route path="/index/log" exact component={Log} />
                <Route path="/index/articleList" exact component={ArticleList} />
                <Route path="/index/addArticle" exact component={AddArticle} />
              </div>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}

export default Index;
